<template>
    <div class="aside">
        <div class="aside-item" @click="chickSupport">
            <svg
                v-if="contentShow.support"
                class="chickSuccess"
                width="20"
                height="20"
                viewBox="0 0 48 48"
                fill="none"
            >
                <path
                    d="M36.222 40.303l5.949-18.697A2 2 0 0040.265 19l-13.133.075L28.5 15.5c.964-2.52 3.172-5.9 1-7.5l-1.711-1.419a1 1 0 00-1.386.196L17 19h-3v22h21.269a1 1 0 00.953-.697z"
                    fill="currentColor"
                />
                <path
                    d="M7 17v26m35.17-21.394l-5.948 18.697a1 1 0 01-.953.697H14V19h3l9.403-12.223a1 1 0 011.386-.196L29.5 8c2.172 1.6-.036 4.98-1 7.5l-1.368 3.575L40.265 19a2 2 0 011.906 2.606z"
                    stroke="#1e80ff"
                    stroke-width="4"
                    fill="currentColor"
                />
            </svg>
            <svg v-else width="20" height="20" viewBox="0 0 48 48" fill="none">
                <path
                    d="M7 17v26m35.17-21.394l-5.948 18.697a1 1 0 01-.953.697H14V19h3l9.403-12.223a1 1 0 011.386-.196l2.535 1.87a6 6 0 012.044 6.974L31 19h9.265a2 2 0 011.906 2.606z"
                    stroke="#4E5969"
                    stroke-width="2"
                />
            </svg>
            <span class="num">{{ contentShow.supportNum }}</span>
        </div>
        <div class="aside-item">
            <el-icon><Comment /></el-icon>
            <span class="num">{{ contentShow.commentNum }}</span>
        </div>
        <div class="aside-item" @click="chickFavorite">
            <el-icon v-if="contentShow.favorite"
                ><StarFilled :class="{ chickSuccess: contentShow.favorite }"
            /></el-icon>
            <el-icon v-else><Star /></el-icon>
            <span class="num">{{ contentShow.favoriteNum }}</span>
        </div>
        <div class="aside-item">
            <el-icon><Promotion /></el-icon>
        </div>
    </div>
    <div class="middle">
        <div class="middle-show">
            <div class="content-top">
                <h1>{{ contentShow.title }}</h1>
                <div class="content-top-end">
                    <span>{{ contentShow.createName }}</span>
                    <span style="margin: 0 8px">{{ contentShow.createTime }}</span>
                    <div class="view"
                        ><el-icon style="margin-right: 3px"><View /></el-icon
                        >{{ contentShow.readNum }}</div
                    >
                    <div class="view" style="margin-left: 8px"
                        ><el-icon style="margin-right: 3px"><Clock /></el-icon>阅读20分钟</div
                    >
                </div>
            </div>
            <div>
                <v-md-preview :text="contentShow.content"></v-md-preview>
            </div>
            <div class="content-end">
                <span>标签: </span>
                <el-tag
                    v-for="(tag, index) in computedTags(contentShow.label)"
                    :key="index"
                    class="mx-1"
                    type="info"
                    size="small"
                    style="margin: 0 5px"
                >
                    {{ tag }}
                </el-tag>
            </div>
        </div>
        <comment-index :content-vo="contentShow" />
    </div>
    <div class="aside-right">
        <div class="end"></div>
        <!-- toc组件 -->
        <div ref="menu" class="toc remove menu">
            <div class="top">
                <div>目录</div>
                <div v-if="menuShow" class="chick" @click="chick">
                    <span>收起</span>
                    <el-icon><ArrowDownBold /></el-icon>
                </div>
                <div v-else class="chick" @click="chick">
                    <span>展开</span>
                    <el-icon><ArrowRightBold /></el-icon>
                </div>
            </div>
            <ul>
                <!-- 为了防止标题内容一致，给每个标题加上唯一的id -->
                <!-- 为了设置各级标题的不同样式，添加了类，h1标签类为item-1，h2标签类为item-2 -->
                <li
                    v-for="(item, index) in headElems"
                    :id="`toc-${index}`"
                    :key="index"
                    :class="`item-${item.tagName.charAt(1)} ${chooseIndex === index && 'li-hover'}`"
                    @click="(event) => scrollFunc(item, event)"
                >
                    {{ item.innerText }}
                </li>
            </ul>
        </div>
    </div>
</template>

<script lang="ts">
    import { defineComponent, nextTick } from 'vue';

    export default defineComponent({
        name: 'ShowPage'
    });
</script>

<script lang="ts" setup>
    import { useRoute } from 'vue-router';
    import { onMounted, ref } from 'vue';
    import { favorite, getContentInfo, support } from '@/api/content/content/api';
    import { ContentVO } from '@/api/content/content/content';
    import {
        ArrowDownBold,
        ArrowRightBold,
        Clock,
        Comment,
        Promotion,
        Star,
        StarFilled,
        View
    } from '@element-plus/icons-vue';
    import CommentIndex from '@/pages/blog/comment/index.vue';
    const CONTENT_HEIGHT = 50;
    const menuShow = ref(true);
    const chooseIndex = ref(0);
    function chick() {
        console.log(menuShow.value);
        menuShow.value = !menuShow.value;
    }
    const { params } = useRoute();
    const menu = ref();
    // toc组件 - 标题元素集合
    const headElems = ref<NodeListOf<HTMLElement> | any>();

    const contentShow = ref<ContentVO>({
        favorite: false,
        favoriteNum: 0,
        readNum: 0,
        support: false,
        supportNum: 0,
        createName: '',
        createTime: '',
        categoryId: '',
        columnId: '',
        content: '',
        cover: '',
        id: '',
        label: '',
        summary: '',
        title: '',
        topicId: '',
        commentNum: 0
    });

    onMounted(async () => {
        await onLoadInfo(params.id as string);
    });

    async function onLoadInfo(id: string) {
        const { data } = await getContentInfo(id);
        contentShow.value = data;
        await nextTick(() => {
            // 元素获取，这里为了防止页面文章内容外其它标题元素干扰，可在选择器前加入限制类名
            headElems.value = Array.from(
                document.querySelectorAll('.vuepress-markdown-body h1,h2,h3,h4')
            );
            // 元素相对文档高度  = elem.getBoundingClientRect() + 当前页面滚动
            // 初始时页面滚动为0
            const relativeHeightArr = headElems.value.map((ele: HTMLElement, index: number) => {
                return Math.floor(ele.getBoundingClientRect().top);
            });
            document.addEventListener('scroll', () => {
                const clientTopList = headElems.value.map(
                    (item: HTMLElement) => item.getBoundingClientRect().top
                );
                chooseIndex.value = clientTopList.findIndex(
                    (item: number) => item > CONTENT_HEIGHT - 10
                );
            });
        });
    }
    const scrollFunc = (item: any, event: any) => {
        console.log(item, event);

        window.scrollTo({
            top: item.offsetTop - CONTENT_HEIGHT,
            behavior: 'smooth'
        });
    };
    const computedTags = (tags: string) => {
        return tags.split(',');
    };

    async function chickSupport() {
        await support(contentShow.value.id, contentShow.value.support);
        if (contentShow.value.support) {
            contentShow.value.supportNum--;
        } else {
            contentShow.value.supportNum++;
        }
        contentShow.value.support = !contentShow.value.support;
    }

    async function chickFavorite() {
        await favorite(contentShow.value.id, contentShow.value.favorite);
        if (contentShow.value.favorite) {
            contentShow.value.favoriteNum--;
        } else {
            contentShow.value.favoriteNum++;
        }
        contentShow.value.favorite = !contentShow.value.favorite;
    }
</script>

<style scoped>
    .aside {
        position: fixed;
        width: 48px;
        top: 140px;
        margin-left: -6rem;
    }

    .middle {
        width: 820px;
        min-width: 600px;
    }

    .middle-show {
        background-color: white;
        margin-bottom: 20px;
    }

    .aside-right {
        margin-left: 15px;
    }

    .end {
        width: 300px;
        background-color: white;
        height: 203px;
        margin-bottom: 20px;
    }

    .menu {
        width: 300px;
        background-color: white;
        position: sticky;
        top: 0; /* 元素距离顶部的距离 */
    }

    .content-top {
        padding: 20px 40px 0;
        border-bottom: 1px #dedede solid;
    }

    .content-end {
        padding: 20px 20px;
        background-color: white;
    }

    .content-top-end {
        display: flex;
        font-size: 12px;
        padding: 20px 0;
    }

    .view {
        display: flex;
        justify-items: center;
        align-items: center;
        text-align: center;
    }

    .aside-item {
        border-radius: 50%;
        width: 48px;
        height: 48px;
        background-color: white;
        margin-top: 10px;
        text-align: center;
        line-height: 48px;
        font-size: 20px;
        color: #a0a5a8;
        position: relative;
        vertical-align: middle;
    }

    .aside-item .el-icon {
        width: 100%;
        height: 100%;
    }

    .num {
        position: absolute;
        font-size: 12px;
        line-height: 12px;
        padding: 2px 3px;
        background-color: #a0a5a8;
        color: white;
        border-radius: 10px;
        left: 35px;
        top: 2px;
    }

    .toc {
        transition: all 0.3s ease;
        cursor: pointer;
        color: rgba(3, 21, 34, 0.644);
        padding: 10px 20px;
    }

    .toc ul {
        padding-top: 10px;
    }

    .toc ul li {
        box-sizing: border-box;
        list-style: none;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        background: transparent;
        transition: all 0.5s ease;
        padding: 5px 0;
        border-left: 3px solid transparent;
        transform: translateX(-3px);
    }

    .toc ul .li-hover {
        background-color: #ffebeb;
        border-left: 3px solid #cf5659;
    }

    .toc ul .toc-choosen {
        background-color: rgba(27, 31, 35, 0.1);
        border-left: 3px solid #cf5659;
        color: #476582;
    }

    .toc ul .item-1 {
        font-weight: 600;
        padding-left: 8px;
    }

    .toc ul .item-2 {
        font-weight: 600;
        padding-left: 13px;
    }

    .toc ul .item-3 {
        padding-left: 23px;
        opacity: 0.95;
    }

    .toc ul .item-4 {
        padding-left: 33px;
        opacity: 0.9;
    }

    .toc .top {
        height: 57px;
        line-height: 57px;
        border-bottom: 1px #dadee5 solid;
        color: #2f2f2f;
        display: flex;
    }

    .chick {
        margin-left: auto;
        color: #a3a3a3;
        display: flex;
        align-items: center;
    }
</style>
